<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <ul>
    <li>我是老大</li>
  </ul>
  <script>
    // 很多情况下，我们需要在页面中增加元素  （比如，点击发布按钮，可以新增一条信息） 
    // 一般情况下，我们新增节点，按照如下操作：
    // 1.创建一个新的节点
    // 2.把创建的新的节点放入到指定的元素内部

    // 1.创建节点：
    // 创造一个新的元素节点document.createElement('标签名')
    const div = document.createElement('div')
    // console.log(div)
    // 2.追加节点：要想在页面中看到,还得插入到某个父元素中
    // 插入到这个父元素的最后-->父元素.appendChild(要插入的元素)
    // 比如document.body.appendChild(div)
    const ul = document.querySelector('ul')
    const li = document.createElement('li')
    li.innerHTML = '我是li'
    // ul.appendChild(li)
    // ul.children
    console.log(ul)
    // 3.追加节点：
    // 插入到父元素中某个子元素的前面-->父元素.insertBefore(要插入的元素, 在哪个元素前面)
    ul.insertBefore(li, ul.children[0])
  </script>
</body>

</html>